<template>
  <div>
    <nav-bar :title="title" />
    <!-- 添加收获地址 -->
    <div>
      <van-form validate-first @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="name"
            label="联系人"
            maxlength="6"
            required
            placeholder="请输入联系人"
            :rules="[{ required: true, message: '请填写联系人' }]"
          />
          <van-cell>
            <span class="cell-span">标签</span>
            <van-tag
              @click="selectTag1(item,index)"
              v-for="(item,index) in sexList"
              plain
              size="large"
              :class="[cuerttenIndex1===index?'active':'']"
            >{{item}}</van-tag>
          </van-cell>
          <van-field
            v-model="phone"
            required
            label="手机号"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            :rules="[{ pattern, message: '请填正确的手机号' }]"
          />
          <van-field
            @click="isSearch = true"
            v-model="dizhi"
            required
            label="地址"
            placeholder="请输入地址"
            right-icon="arrow"
            :rules="[{ required: true, message: '请填写地址' }]"
          />
          <van-field
            v-model="menpaihao"
            required
            label="门牌号"
            placeholder="请输入门牌号"
            right-icon="edit"
            :rules="[{ required: true, message: '请填写门牌号' }]"
          />
          <van-cell>
            <span class="cell-span">标签</span>
            <van-tag
              @click="selectTag2(item,index)"
              v-for="(item,index) in TabList"
              plain
              size="medium"
              :class="[cuerttenIndex2===index?'active':'']"
            >{{item}}</van-tag>
          </van-cell>
        </van-cell-group>
        <van-button round block type="info" native-type="submit">保存</van-button>
      </van-form>
    </div>
    <address-search v-if="isSearch" @click="handleAdd" @selectAddress="selectAddress" />
  </div>
</template>

<script>
import NavBar from "./NavBar";
import AddressSearch from "./AddressSearch";
import { CellGroup, Field, Form, Cell, Tag,Button} from "vant";
export default {
  name: "AddAddress",
  components: {
    NavBar,
    AddressSearch,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
  data() {
    return {
      title:'',
      name: "",
      phone: "",
      dizhi: "",
      menpaihao: "",
      sixText: "",
      tabText: "",
      pattern: /^1[3-9]\d{9}$/,
      cuerttenIndex1: "",
      cuerttenIndex2: "",
      sexList: ["先生", "女士"],
      TabList: ["家", "学校", "公司"],
      isSearch: false
    };
  },
  activated(){
    this.acceptAddress()
  },
  methods: {
    selectTag1(item, index) {
      this.sixText = item;
      this.cuerttenIndex1 = index;
    },
    selectTag2(item, index) {
      this.tabText = item;
      this.cuerttenIndex2 = index;
    },
    handleAdd() {
      this.isSearch = false;
    },
    selectAddress(item) {
      this.dizhi = item.district + item.address + item.name;
      this.isSearch = false;
    },
    onSubmit(){
      const val={
        name:this.name,
        phone:this.phone,
        bottom:this.menpaihao,
        address:this.dizhi,
        sex:this.sixText,
        tag:this.tabText,
      }
      console.log(val);
      
      this.saveAddress(val)
    },
    saveAddress(val){
      axios
        .post("/api/user/add_address/" + localStorage.getItem("token"), val)
        .then(res => {
          // 提交数据成功后清空表单
          console.log(res);
          
         /*  this.clearAddress(); */
          this.$router.replace("/myAddress");
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改
    acceptAddress(){
      this.title=this.$route.query.title
      const address=this.$route.query.address
      if(address){
        const addressInfo = JSON.parse(decodeURIComponent(address));
        this.name=addressInfo.name
        this.phone=addressInfo.phone
        this.menpaihao=addressInfo.bottom
        this.dizhi=addressInfo.address
        this.sixText=addressInfo.sex
        if(addressInfo.sixText){
          addressInfo.sixText==='男'?0:1
        }
        this.tabText=addressInfo.tag
      }else{
        this.title='添加地址'
        this.name=''
        this.phone=''
        this.menpaihao=''
        this.dizhi=''
        this.sixText=''
        this.sixText=''
         this.tabText=''
      }
    }
  }
};
</script>

<style scoped>
.cell-span {
  display: inline-block;
  width: 90px;
}
.van-tag {
  margin-right: 10px;
}
.active {
  color: #1989fa;
}
</style>